<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚衣商城</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
</head>

<body>
    <div class="app-wrap" v-cloak id="order">
        <header-top></header-top>
        <user-top></user-top>
        <div class="bg-gray" style="padding-bottom:60px">
            <common-crumb :crumblist="crumblist" class="order_crumblist"></common-crumb>
            <div class="content order_content">
                <div class="order_content_item">
                    <div class="item_left">
                        <div class="order_number">订单编号：{{orderInfo.orderNumber}}</div>
                        <h1>{{statusText}}</h1>
                    </div>
                    <div class="item_right">
                        <div class="order_status">
                            尊敬的客户，您的订单已支付成功，等待商家发货。
                        </div>
                        <!-- status = 1: 待付款 -->
                        <!-- status = 2: 付款成功 -->
                        <!-- status = 3: 商家发货 -->
                        <!-- status = 4: 等待收货 -->
                        <!-- status = 5: 完成 -->
                        <!-- 6 承接失败 -->
                        {{status}}
                        <div class="custom_process">
                            <div class="curstom_common custom_a">
                                <i class="icon-order1"></i>
                                <div class="custom_pos_common custom_posa">
                                    <p>提交订单</p>
                                    <div class="date">{{orderInfo.createTime}}</div>
                                </div>
                            </div>
                            <div class="curstom_common custom_orderb" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-orderbd1': status == 1,'icon-orderb': status > 1}"></i>
                                <div v-show="status == 1" class="custom_pos_common custom_posb">
                                    <p>等待付款</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_a" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-order2': status < 2,'icon-order2a': status >= 2}"></i>
                                <div class="custom_pos_common custom_posa">
                                    <p>付款成功</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_orderb" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-orderbd2': status < 2,'icon-orderbd1': status == 2,'icon-orderb': status > 2}"></i>
                                <div v-show="status == 2" class="custom_pos_common custom_posb">
                                    <p>付款成功</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_a" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-order3': status < 3, 'icon-order3a': status >=3}"></i>
                                <div class="custom_pos_common custom_posa">
                                    <p>商家发货</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_orderb" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-orderbd2': status < 3, 'icon-orderbd1': status == 3 , 'icon-orderb': status > 3}"></i>
                                <div v-show="status == 3" class="custom_pos_common custom_posb">
                                    <p>等待收货</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_a" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-order4': status < 4, 'icon-order4a': status >=4} "></i>
                                <div class="custom_pos_common custom_posa">
                                    <p v-bind:class="{'col-gray': status< 4, 'col-green': status==4 , 'col-base': status> 4}">等待收货</p>
                                </div>
                            </div>
                            <div class="curstom_common custom_orderb" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-orderbd2': status < 4, 'icon-orderbd1': status == 4 , 'icon-orderb': status > 4}"></i>
                            </div>
                            <div class="curstom_common custom_a" v-if="status != 11 && status != 12">
                                <i v-bind:class="{'icon-order5': status < 5, 'icon-order5a': status >=5} "></i>
                                <div class="custom_pos_common custom_posa">
                                    <p v-bind:class="{'col-gray': status< 5, 'col-green': status==5 , 'col-base': status> 5}">完成</p>
                                    <div class="date" v-if="status==5">{{globalAPI.getDate({n:orderInfo.updateTime,format:"YYYY-MM-DD hh:mm:ss"})}}</div>
                                </div>
                            </div>

                            <div class="curstom_common custom_b" v-if="status == 11 || status == 12">
                                <i class="icon_dingzhib"></i>
                            </div>
                            <div class="curstom_common custom_a" v-if="status == 11">
                                <i class="icon_dingzhi1"></i>
                                <div class="custom_pos_common custom_posa">
                                    <p>订单取消</p>
                                    <div class="date">{{globalAPI.getDate({n:orderInfo.updateTime,format:"YYYY-MM-DD hh:mm:ss"})}}</div>
                                </div>
                            </div>
                            <div class="curstom_common custom_a custom_c" v-if="status == 12">
                                <i class="icon_dingzhi8 active"></i>
                                <div class="custom_pos_common custom_posa col-gray">
                                    <p style="width:85px">订单关闭</p>
                                    <div class="date">{{globalAPI.getDate({n:orderInfo.updateTime,format:"YYYY-MM-DD hh:mm:ss"})}}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 承接失败 -->
                        <div class="custom_process">

                        </div>
                    </div>
                </div>

                <div class="order_content_item mt20" v-if="deliveryInfo">
                    <div class="item_left pt40">
                        <div class="item_img">
                            <img :src="orderInfo.orderProducts[0].picImg" alt="" v-if="orderInfo.orderProducts">
                        </div>
                        <div class="item_express" style="text-align:left;">
                            <p>送货方式: 普通快递</p>
                            <p>承运人: {{deliveryInfo ? deliveryInfo.name : '无'}}</p>
                            <p>货运单号: {{deliveryInfo ? deliveryInfo.logisticsNumber : '无'}}</p>
                        </div>
                      
                    </div>
                    <!--TODO 物流信息-->
                    <div class="item_right">
                        <div class="order_timeLine">
                            <ul class="timeLine">
                                <li  v-for="(item,index) in deliveryInfo.traces" :class="{'active' : index == 0}">{{item.AcceptTime}} {{item.AcceptStation}} </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="order_detail order_detail2">
                    <div class="order_detail_item">
                        <div class="title">
                            订单信息
                        </div>
                        <div class="info_con" v-if="orderInfo.orderShipment">
                            <div class="label">收货人：</div>
                            <div class="item">{{orderInfo.orderShipment.userName}}</div>
                            <div class="label">地址：</div>
                            <div class="item">{{orderInfo.orderShipment.provinceName}}{{orderInfo.orderShipment.cityName}}{{orderInfo.orderShipment.districtName}}{{orderInfo.orderShipment.userAdress}}</div>
                            <div class="label">手机号码：</div>
                            <div class="item">{{orderInfo.orderShipment.userPhone}}</div>
                            <div class="label">备注：</div>
                            <div class="item">无</div>
                        </div>
                    </div>
                    <div class="order_detail_item">
                        <div class="title">
                            配送信息
                        </div>
                        <div class="info_con">
                            <div class="label">配送方式：</div>
                            <div class="item">{{deliveryInfo ? deliveryInfo.name : '无'}}</div>
                    
                            <div class="label">运费：</div>
                            <div class="item">{{orderInfo.shipmentAmount}}</div>
                        </div>
                    </div>
                    <div class="order_detail_item">
                        <div class="title">
                            付款信息
                        </div>
                        <div class="info_con">
                            <div class="label">商品总额：</div>
                            <div class="item">{{orderInfo.orderAmount}}</div>
                            <div class="label">应支付金额：</div>
                            <div class="item">{{orderInfo.payAmount}}</div>
                        </div>
                    </div>
                    <div class="order_detail_item" >
                        <div class="title">
                           发票信息
                        </div>
                        <div class="info_con" v-if="orderInfo.invoiceType != 1 && orderInfo.orderInvoice">
                            <div class="label">发票类型：</div>
                            <div class="item">{{orderInfo.invoiceType == 2 ? '电子发票' : '纸质发票'}}</div>
                            <div class="label">发票抬头：</div>
                            <div class="item">{{orderInfo.orderInvoice.invoiceTitle}}</div>
                            <div class="label">纳税人识别号：</div>
                            <div class="item">{{orderInfo.orderInvoice.taxpayerNumber}}</div>
                            <div class="label">电子邮箱：</div>
                            <div class="item">{{orderInfo.orderInvoice.email}}</div>
                        </div>
                        <div class="info_con" v-if="orderInfo.invoiceType == 1">
                            <div class="label">发票类型：</div>
                            <div class="item">不开发票</div>
                        </div>
                    </div>
                </div>

                <div class="goodsName">
                   {{orderInfo.shopName}}
                    <i class="icon-login_qq"></i>
                </div>
                <div class="order_goods_detail">
                    <table class="goodsList_table">
                        <thead>
                            <tr>
                                <td>商品</td>
                                <td>商品价格</td>
                                <td>数量</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in orderInfo.orderProducts">
                                <td>
                                    <div class="goods_img">
                                        <img :src="item.picImg" alt="">
                                    </div>
                                    <div class="goods_name">{{item.name}}</div>
                                    <div class="goods_type">
                                        <p>颜色分类: {{item.colorName}}</p>
                                        <p>尺寸: {{item.sizeName}}</p>
                                    </div>
                                </td>
                                <td>￥{{item.productPrice}}</td>
                                <td>{{item.buyNumber}}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="order_goods_info">
                        <div class="order_goods_price">
                            <span>商品总额:</span><span>￥{{orderInfo.orderAmount}}</span>
                        </div>
                        <div class="order_goods_price">
                            <span>运 费:</span><span>￥{{orderInfo.shipmentAmount}}</span>
                        </div>
                        <div class="order_goods_price">
                            <span>平台优惠:</span><span>￥{{(orderInfo.payAmount-(orderInfo.orderAmount+orderInfo.shipmentAmount)).toFixed(2)}}</span>
                        </div>
                        <div class="order_goods_price col_red">
                            <span>应付金额:</span><span><h2>￥{{orderInfo.payAmount}}</h2></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        order();
    </script>
</body>

</html>